<template>
  <div class="h-full">
    <a-layout style="background-color: transparent">
      <a-layout-content class="p-4 md:p-8">
        <div class="relative max-w-7xl mx-auto">
          <!-- 筛选区域 -->
          <div class="mb-6 space-y-4 bg-white/80 backdrop-blur-sm rounded-lg p-4 shadow-sm">
            <!-- 搜索框和排序 -->
            <div class="flex flex-col sm:flex-row gap-4">
              <div class="flex-1">
                <a-input
                    v-model:value="searchParams.keyword"
                    placeholder="搜索标题或描述..."
                    size="large"
                    @search="onSearch"
                    @change="onSearchChange"
                    class="w-full"
                >
                  <template #suffix>
                    <SearchOutlined class="text-gray-400" @click="onSearch" />
                  </template>
                </a-input>
              </div>
              <div class="w-full sm:w-48">
                <a-select
                    v-model:value="searchParams.sort"
                    size="large"
                    placeholder="排序方式"
                    @change="onSortChange"
                    class="w-full"
                >
                  <a-select-option value="created_at">最新发布</a-select-option>
                  <a-select-option value="thumb_num">最受欢迎</a-select-option>
                  <a-select-option value="browse_num">浏览量最高</a-select-option>
                  <a-select-option value="collect_num">收藏最多</a-select-option>
                </a-select>
              </div>
            </div>

            <!-- 标签区域 -->
            <div class="space-y-3">
              <!-- 可选标签区域 -->
              <div class="relative" v-if="availableTags.length > 0">
                <div
                    ref="tagsContainer"
                    :class="[
                    'flex flex-wrap gap-1.5 overflow-hidden transition-all duration-300',
                    showAllTags ? 'max-h-none' : 'max-h-16'
                  ]"
                >
                  <a-tag
                      v-for="tag in availableTags"
                      :key="tag"
                      :class="[
                        'cursor-pointer transition-all duration-200 hover:scale-105 border border-gray-200',
                        'px-2.5 py-1 rounded-md text-xs font-normal relative group',
                        selectedTags.includes(tag)
                          ? 'bg-blue-50 text-blue-600 border-blue-200 shadow-sm'
                          : 'bg-gray-50 text-gray-600 hover:bg-gray-100 hover:border-gray-300'
                      ]"
                      @click="toggleTag(tag)"
                  >
                    <span v-if="tag.length <= 4">{{ tag }}</span>
                    <span v-else>{{ tag.substring(0, 3) }}...</span>

                    <!-- Tooltip for long tags -->
                    <div
                        v-if="tag.length > 4"
                        class="absolute bottom-full left-1/2 transform -translate-x-1/2 mb-2 px-2 py-1 bg-gray-800 text-white text-xs rounded opacity-0 group-hover:opacity-100 transition-opacity duration-200 pointer-events-none whitespace-nowrap z-10"
                    >
                      {{ tag }}
                      <div class="absolute top-full left-1/2 transform -translate-x-1/2 w-0 h-0 border-l-4 border-r-4 border-t-4 border-transparent border-t-gray-800"></div>
                    </div>
                  </a-tag>
                </div>

                <!-- 展开/收起按钮 - 只在超过2行时显示 -->
                <div
                    v-if="shouldShowExpandButton"
                    class="flex justify-center mt-2"
                >
                  <a-button
                      type="text"
                      size="small"
                      @click="showAllTags = !showAllTags"
                      class="text-blue-500 hover:text-blue-600 text-xs"
                  >
                    <template #icon>
                      <DownOutlined v-if="!showAllTags" class="text-xs" />
                      <UpOutlined v-else class="text-xs" />
                    </template>
                    {{ showAllTags ? '收起' : '展开更多' }}
                  </a-button>
                </div>
              </div>

              <!-- 已选标签区域 -->
              <div v-if="selectedTags.length > 0" class="pt-3 border-t border-gray-200">
                <div class="flex items-center gap-3">
                  <span class="text-sm text-gray-600 font-medium whitespace-nowrap">已选择:</span>

                  <div class="flex-1 min-w-0">
                    <div
                        :class="[
                        'flex flex-wrap gap-1.5 overflow-hidden transition-all duration-300',
                        showAllSelectedTags ? 'max-h-none' : 'max-h-7'
                      ]"
                    >
                      <a-tag
                          v-for="tag in selectedTags"
                          :key="tag"
                          closable
                          @close="removeTag(tag)"
                          class="selected-tag-item"
                      >
                        <span v-if="tag.length <= 4">{{ tag }}</span>
                        <span v-else :title="tag">{{ tag.substring(0, 3) }}...</span>
                      </a-tag>
                    </div>

                    <!-- 已选标签展开/收起 -->
                    <div
                        v-if="selectedTags.length > 8"
                        class="mt-1"
                    >
                      <a-button
                          type="text"
                          size="small"
                          @click="showAllSelectedTags = !showAllSelectedTags"
                          class="text-blue-500 hover:text-blue-600 text-xs h-6 px-2"
                      >
                        {{ showAllSelectedTags ? '收起' : `还有${selectedTags.length - 8}个标签` }}
                      </a-button>
                    </div>
                  </div>

                  <a-button
                      type="text"
                      size="small"
                      @click="clearAllTags"
                      class="clear-all-btn whitespace-nowrap"
                  >
                    <template #icon>
                      <CloseOutlined class="text-xs" />
                    </template>
                    清除全部
                  </a-button>
                </div>
              </div>
            </div>

            <!-- 筛选统计 -->
            <div class="flex justify-between items-center text-sm text-gray-500">
              <span>共找到 {{ filteredCount }} 条记录</span>
              <a-button
                  v-if="hasActiveFilters"
                  type="link"
                  size="small"
                  @click="resetFilters"
                  class="text-xs"
              >
                重置筛选
              </a-button>
            </div>
          </div>

          <!-- Grid Container -->
          <div :class="gridContainerClasses">
            <template v-if="travels.length === 0 && !loading">
              <div class="text-center py-12">
                <a-empty
                    description="暂无数据"
                    :image="Empty.PRESENTED_IMAGE_SIMPLE"
                >
                  <template #description>
                    <span class="text-gray-500">
                      {{ hasActiveFilters ? '尝试调整搜索条件或标签筛选' : '暂无旅行记录' }}
                    </span>
                  </template>
                </a-empty>
              </div>
            </template>
            <template v-else>
              <div
                  v-for="(travel, key) in travels"
                  :key="travel.id"
                  :class="travelCardClasses"
              >
                <!-- Travel Card -->
                <div
                    @click="toRoute('/travel/info/' + travel.id)"
                    class="travel-card group relative overflow-hidden rounded-lg shadow-lg cursor-pointer"
                    :class="{ 'bg-black': key % 2 !== 0 }"
                >
                  <!-- Travel Image Container with Fixed Aspect Ratio -->
                  <div class="relative w-full pb-[75%]">
                    <img
                        v-if="travel.photo"
                        :src="$fileFull(travel.photo,'?image/resize,p_5')"
                        :alt="travel.title"
                        class="absolute inset-0 w-full h-full object-cover transition-transform duration-300 group-hover:scale-100"
                    />
                    <div
                        v-else
                        class="absolute inset-0 bg-gray-100 flex items-center justify-center"
                    >
                      <div class="text-4xl text-gray-400">No Photo</div>
                    </div>

                    <!-- Title and Time Header -->
                    <div class="absolute top-0 left-0 right-0 p-4 flex justify-between items-center bg-gradient-to-b from-black/70 to-transparent">
                      <h3 class="text-lg font-medium text-white truncate flex-1 mr-2">
                        {{ travel.title }}
                      </h3>
                      <span class="text-xs text-white/80 whitespace-nowrap">
                        {{ $formatDate(travel.createdAt || travel.updatedAt) }}
                      </span>
                    </div>

                    <!-- Travel Description (visible on hover) -->
                    <div class="absolute bottom-0 left-0 right-0 px-4 pt-4 pb-1 bg-gradient-to-t from-black/70 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-200">
                      <p class="text-sm text-white/90 line-clamp-3" v-html="formattedContent(travel.description)"></p>
                    </div>

                    <!-- Action Buttons (always visible) -->
                    <div class="absolute inset-0 flex items-center space-x-4 justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-200">
                      <a-button
                          class="action-button hover:scale-110 transition-transform"
                          :class="[
                          key % 2 !== 0 ? 'bg-white hover:bg-white/90' : 'bg-black hover:bg-black/90',
                          travel.isCollect ? '!border-2 !border-red-500' : ''
                        ]"
                          shape="circle"
                          size="large"
                          @click.stop="travelCollectAc(travel)"
                      >
                        <template #icon>
                          <StarFilled
                              v-if="travel.isCollect"
                              :class="[
                              key % 2 !== 0 ? 'text-black' : 'text-white',
                              travel.isCollect ? '!text-red-500' : ''
                            ]"
                          />
                          <StarOutlined
                              v-else
                              :class="[
                              key % 2 !== 0 ? 'text-black' : 'text-white',
                              travel.isCollect ? '!text-red-500' : ''
                            ]"
                          />
                        </template>
                      </a-button>
                      <a-button
                          class="action-button hover:scale-110 transition-transform"
                          :class="[
                          key % 2 !== 0 ? 'bg-white hover:bg-white/90' : 'bg-black hover:bg-black/90',
                          travel.isThumb ? '!border-2 !border-red-500' : ''
                        ]"
                          shape="circle"
                          size="large"
                          @click.stop="travelThumbAc(travel)"
                      >
                        <template #icon>
                          <HeartFilled
                              v-if="travel.isThumb"
                              :class="[
                              key % 2 !== 0 ? 'text-black' : 'text-white',
                              travel.isThumb ? '!text-red-500' : ''
                            ]"
                          />
                          <HeartOutlined
                              v-else
                              :class="[
                              key % 2 !== 0 ? 'text-black' : 'text-white',
                              travel.isThumb ? '!text-red-500' : ''
                            ]"
                          />
                        </template>
                      </a-button>
                      <a-button
                          v-if="state.user && state.user.id === travel.account.id"
                          class="action-button hover:scale-110 transition-transform"
                          :class="key % 2 !== 0 ? 'bg-white hover:bg-white/90' : 'bg-black hover:bg-black/90'"
                          shape="circle"
                          size="large"
                          @click.stop="editTravel(travel)"
                      >
                        <template #icon>
                          <EditOutlined :class="key % 2 !== 0 ? 'text-black' : 'text-white'" />
                        </template>
                      </a-button>
                      <a-button
                          v-if="state.user && state.user.id === travel.account.id"
                          class="action-button hover:scale-110 transition-transform"
                          :class="key % 2 !== 0 ? 'bg-white hover:bg-white/90' : 'bg-black hover:bg-black/90'"
                          shape="circle"
                          size="large"
                          @click.stop="$_confirm('删除确认','确定要删除这条数据吗？',()=>{
                        deleteTravel(travel)
                      })"
                      >
                        <template #icon>
                          <DeleteOutlined :class="key % 2 !== 0 ? 'text-black' : 'text-white'" />
                        </template>
                      </a-button>
                    </div>
                  </div>

                  <!-- User Info Footer -->
                  <div
                      :class="[
                      'p-4 flex items-center justify-between',
                      key % 2 !== 0 ? 'bg-white' : 'bg-black'
                    ]"
                  >
                    <div class="flex items-center gap-2">
                      <a-avatar :src="($fileFull(travel.account.avatar)) || avatar" :size="24" />
                      <span
                          class="text-sm font-medium truncate max-w-[10ch]"
                          :class="key % 2 !== 0 ? 'text-black' : 'text-white'"
                      >
                        {{ travel.account.nickname }}
                      </span>
                      <a-tag
                          v-if="state.user && state.user.id === travel.account.id"
                          class="border-0 text-xs"
                          :class="key % 2 !== 0 ? 'bg-black text-white' : 'bg-white text-black'"
                      >
                        ME
                      </a-tag>
                    </div>
                    <div class="flex items-center gap-3">
                      <span
                          class="flex items-center gap-1"
                          :class="[
                          key % 2 !== 0 ? 'text-black' : 'text-white',
                          travel.isCollect ? 'text-red-500' : ''
                        ]"
                      >
                        <StarFilled v-if="travel.isCollect"   :class="[
                          travel.isCollect ? 'text-red-500' : ''
                        ]"/>
                        <StarOutlined v-else />
                        {{ travel.collectNum > 999 ? '999+' : (travel.collectNum || 0) }}
                      </span>
                      <span
                          class="flex items-center gap-1"
                          :class="[
                          key % 2 !== 0 ? 'text-black' : 'text-white',
                          travel.isThumb ? 'text-red-500' : ''
                        ]"
                      >
                        <HeartFilled v-if="travel.isThumb"  :class="[
                          travel.isThumb ? 'text-red-500' : ''
                        ]" />
                        <HeartOutlined v-else />
                        {{ travel.thumbNum > 999 ? '999+' : (travel.thumbNum || 0) }}
                      </span>
                      <span
                          class="flex items-center gap-1"
                          :class="key % 2 !== 0 ? 'text-black' : 'text-white'"
                      >
                        <EyeOutlined />
                        {{ travel.browseNum > 999 ? '999+' : (travel.browseNum || 0) }}
                      </span>
                    </div>
                  </div>
                </div>
              </div>
            </template>
          </div>

          <div ref="observerTarget" class="h-10 mt-4"></div>

          <!-- 重新设计的新增按钮 -->
          <div
              v-if="state.user && state.user.id"
              class="fixed bottom-6 right-6 z-50"
          >
            <a-button
                class="modern-add-button group"
                shape="circle"
                size="large"
                :loading="loading"
                :disabled="loading"
                @click="toRoute('/travel/manage/0')"
            >
              <template #icon>
                <PlusOutlined class="add-icon" />
              </template>
            </a-button>
          </div>
        </div>
      </a-layout-content>
    </a-layout>
  </div>
</template>

<script setup>
import { ref, computed, onMounted, onUnmounted, watch, nextTick } from 'vue'
import { travelList, travelDel, travelCollect, travelThumb,travelTags } from "@/api/travel"
import { useAuthStore } from '@/store/auth'
const { state } = useAuthStore()
import {
  HeartOutlined,
  HeartFilled,
  StarOutlined,
  StarFilled,
  EyeOutlined,
  EditOutlined,
  PlusOutlined,
  DeleteOutlined,
  SearchOutlined,
  DownOutlined,
  UpOutlined,
  CloseOutlined
} from '@ant-design/icons-vue'
import avatar from "@/assets/image/default-avatar.png"
import { useRouter } from "vue-router"
import { Empty, message } from 'ant-design-vue'

const router = useRouter()
const toRoute = (path) => {
  router.push(path)
}

// 搜索和筛选参数
const searchParams = ref({
  keyword: '',
  sort: 'created_at'
})

// 可用标签
const availableTags = ref([])

// 选中的标签
const selectedTags = ref([])

// 标签展开状态
const showAllTags = ref(false)
const showAllSelectedTags = ref(false)

// 筛选后的数量
const filteredCount = ref(0)

// 是否有活跃的筛选条件
const hasActiveFilters = computed(() => {
  return searchParams.value.keyword || selectedTags.value.length > 0 || searchParams.value.sort !== 'latest'
})

// 标签操作
const toggleTag = (tag) => {
  const index = selectedTags.value.indexOf(tag)
  if (index > -1) {
    selectedTags.value.splice(index, 1)
  } else {
    selectedTags.value.push(tag)
  }
  resetAndSearch()
}

const removeTag = (tag) => {
  const index = selectedTags.value.indexOf(tag)
  if (index > -1) {
    selectedTags.value.splice(index, 1)
    resetAndSearch()
  }
}

const clearAllTags = () => {
  selectedTags.value = []
  resetAndSearch()
}

// 重置筛选
const resetFilters = () => {
  searchParams.value.keyword = ''
  searchParams.value.sort = 'created_at'
  selectedTags.value = []
  resetAndSearch()
}

// 搜索相关
const onSearch = () => {
  resetAndSearch()
}

const onSearchChange = () => {
  // 可以添加防抖逻辑
  if (!searchParams.value.keyword) {
    resetAndSearch()
  }
}

const onSortChange = () => {
  resetAndSearch()
}

// 重置并搜索
const resetAndSearch = () => {
  current.value = 1
  travels.value = []
  hasMore.value = true
  list()
}

const gridContainerClasses = computed(() => {
  const count = travels.value.length
  if (count === 0) {
    return 'flex justify-center items-center min-h-[50vh]'
  } else if (count === 1) {
    return 'flex justify-center items-center min-h-[50vh]'
  } else if (count === 2) {
    return 'grid grid-cols-1 md:grid-cols-2 gap-4 justify-items-center'
  } else if (count <= 4) {
    return 'grid grid-cols-1 sm:grid-cols-2 gap-4 justify-items-center'
  } else {
    return 'grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4'
  }
})

const travelCardClasses = computed(() => {
  const count = travels.value.length
  if (count === 1) {
    return 'w-full max-w-2xl'
  } else if (count === 2) {
    return 'w-full max-w-xl'
  } else if (count <= 4) {
    return 'w-full max-w-lg'
  } else {
    return 'w-full'
  }
})

let observer = null

const observerTarget = ref(null)
const current = ref(1)
const total = ref(0)
const pageSize = ref(16)
const loading = ref(false)
const params = ref({ my: false, title: undefined, myCollect: false, sort: "", myThumb: false, description: "", keyword:"" })
const travels = ref([])
const hasMore = ref(true)

// 添加ref用于检测标签容器高度
const tagsContainer = ref(null)
const shouldShowExpandButton = ref(false)

// 检查是否需要显示展开按钮
const checkTagsHeight = () => {
  if (tagsContainer.value) {
    const containerHeight = tagsContainer.value.scrollHeight
    const visibleHeight = 64 // 2行的大概高度 (32px * 2)
    shouldShowExpandButton.value = containerHeight > visibleHeight
  }
}

const list = () => {
  if (loading.value || !hasMore.value) return
  loading.value = true

  // 构建请求参数
  const requestParams = {
    ...params.value,
    keyword: searchParams.value.keyword,
    sort: searchParams.value.sort,
    tags: selectedTags.value,//.join(','),
    page: {
      pageNum: current.value,
      pageSize: pageSize.value
    }
  }
  if(current.value===1){
    travelTags(Object.assign({},requestParams,{page:{pageSize:20}})).then(res=>{
      if(res&&res.code===200){
        const data = res.data.tags||[]
        availableTags.value = (data.map(item=>
           item.name
        ))
      }
    })
  }

  travelList(requestParams).then(res => {
    if (res && res.code === 200) {
      let data = res.data.list || []
      if (current.value === 1) {
        travels.value = data
      } else {
        travels.value = [...travels.value, ...data]
      }
      total.value = res.data.total || 0
      filteredCount.value = res.data.total || 0
      hasMore.value = data.length === pageSize.value
      current.value++
    }
  }).finally(() => {
    loading.value = false
  })
}

const travelCollectAc = async (travel) => {
  try {
    travel.collectNum = travel.collectNum || 0
    travel.isCollect = !travel.isCollect
    travel.collectNum += travel.isCollect ? 1 : -1
    await travelCollect({ id: travel.id, do: travel.isCollect })
  } catch (error) {
    console.error('Error toggling favorite:', error)
    // 回滚状态
    travel.isCollect = !travel.isCollect
    travel.collectNum += travel.isCollect ? 1 : -1
  }
}

const travelThumbAc = async (travel) => {
  try {
    travel.thumbNum = travel.thumbNum || 0
    travel.isThumb = !travel.isThumb
    travel.thumbNum += travel.isThumb ? 1 : -1
    await travelThumb({ id: travel.id, do: travel.isThumb })
  } catch (error) {
    console.error('Error toggling like:', error)
    // 回滚状态
    travel.isThumb = !travel.isThumb
    travel.thumbNum += travel.isThumb ? 1 : -1
  }
}

const editTravel = (travel) => {
  router.push(`/travel/manage/${travel.id}`)
}

const deleteTravel = async (travel) => {
  // 可以添加确认对话框
  try {
    await travelDel({ id: travel.id })
    message.success('删除成功')
    resetAndSearch()
  } catch (error) {
    console.error('Error deleting travel:', error)
    message.error('删除失败')
  }
}

const setupIntersectionObserver = () => {
  observer = new IntersectionObserver((entries) => {
    if (entries[0].isIntersecting && !loading.value && hasMore.value) {
      list()
    }
  }, {
    root: null,
    rootMargin: '0px',
    threshold: 0.1
  })

  if (observerTarget.value) {
    observer.observe(observerTarget.value)
  }
}
const formattedContent=(data)=> {
  if(!data){
    return data
  }
  return data.replace(/\n/g, '<br/>');
}
onMounted(() => {
  list()
  setupIntersectionObserver()
  nextTick(() => {
    checkTagsHeight()
  })
})

onUnmounted(() => {
  if (observer) {
    observer.disconnect()
  }
})

// 监听搜索参数变化
watch([selectedTags], () => {
  // 可以添加防抖逻辑
}, { deep: true })

// 监听标签变化
watch(availableTags, () => {
  nextTick(() => {
    checkTagsHeight()
  })
}, { deep: true })
</script>

<style scoped>
.travel-card {
  transition: transform 0.2s ease, shadow 0.2s ease;
}

.travel-card:hover {
  transform: translateY(-2px);
}

.action-button {
  transition: all 0.2s ease;
}

/* 现代化的新增按钮 */
.modern-add-button {
  width: 56px !important;
  height: 56px !important;
  background: linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 100%) !important;
  border: 2px solid #d1d5db !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.modern-add-button:hover {
  transform: translateY(-2px) scale(1.05) !important;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2) !important;
  background: linear-gradient(135deg, #e5e7eb 0%, #d1d5db 100%) !important;
  border-color: #9ca3af !important;
}

.modern-add-button:active {
  transform: translateY(0) scale(1) !important;
}

.add-icon {
  color: #6b7280 !important;
  font-size: 20px !important;
  transition: all 0.3s ease !important;
}

.modern-add-button:hover .add-icon {
  color: #374151 !important;
  transform: rotate(90deg) !important;
}

/* 已选标签样式 - 更柔和的颜色 */
.selected-tag-item {
  background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%) !important;
  color: #1e40af !important;
  border: 1px solid #93c5fd !important;
  border-radius: 6px !important;
  padding: 2px 8px !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  transition: all 0.2s ease !important;
}

.selected-tag-item:hover {
  background: linear-gradient(135deg, #bfdbfe 0%, #93c5fd 100%) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 2px 4px rgba(59, 130, 246, 0.2) !important;
}

/* 清除全部按钮样式 */
.clear-all-btn {
  color: #ef4444 !important;
  font-size: 12px !important;
  height: 28px !important;
  padding: 0 8px !important;
  border-radius: 6px !important;
  transition: all 0.2s ease !important;
}

.clear-all-btn:hover {
  background-color: #fef2f2 !important;
  color: #dc2626 !important;
}

/* Override Ant Design button styles */
:deep(.ant-btn-circle) {
  display: flex;
  align-items: center;
  justify-content: center;
}

:deep(.ant-btn-circle.modern-add-button) {
  width: 56px;
  height: 56px;
}

.line-clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* 筛选区域样式 */
:deep(.ant-input-search .ant-input-group .ant-input-affix-wrapper) {
  border-radius: 8px;
}

:deep(.ant-select-selector) {
  border-radius: 8px !important;
}

/* 标签样式优化 */
:deep(.ant-tag) {
  margin-bottom: 2px;
  margin-right: 0;
}

/* 响应式优化 */
@media (max-width: 640px) {
  .modern-add-button {
    width: 48px !important;
    height: 48px !important;
    bottom: 20px !important;
    right: 20px !important;
  }

  .add-icon {
    font-size: 18px !important;
  }
}

/* 标签折叠动画 */
.tag-collapse-enter-active,
.tag-collapse-leave-active {
  transition: all 0.3s ease;
}

.tag-collapse-enter-from,
.tag-collapse-leave-to {
  opacity: 0;
  transform: translateY(-10px);
}

/* Tooltip样式 */
.group:hover .group-hover\:opacity-100 {
  opacity: 1;
}
</style>
